<template>
  <section class="section hero">
    <div class="container">
      <div class="hero-content">
        <h1 class="title">
          <span class="title-line">探索前端技术的</span>
          <span class="title-line highlight">无限可能</span>
        </h1>
        <p class="subtitle">使用最新的 Web 技术，打造令人惊叹的用户体验</p>
        <div class="cta-buttons">
          <router-link to="/features" class="btn primary-btn">
            <span class="btn-text">开始探索</span>
            <span class="btn-icon">→</span>
          </router-link>
          <router-link to="/demo" class="btn secondary-btn">
            <span class="btn-text">查看演示</span>
            <span class="btn-icon">↓</span>
          </router-link>
        </div>
      </div>
      <div class="floating-elements">
        <div class="float-element html">HTML5</div>
        <div class="float-element css">CSS3</div>
        <div class="float-element js">JS</div>
        <div class="float-element vue">Vue</div>
      </div>
    </div>
    <div class="hero-background">
      <div class="gradient-sphere"></div>
      <div class="gradient-sphere"></div>
      <div class="gradient-sphere"></div>
    </div>
  </section>
</template>

<script setup>
import { onMounted } from 'vue'
import gsap from 'gsap'

onMounted(() => {
  // 标题动画
  gsap.from('.title-line', {
    duration: 1,
    y: 100,
    opacity: 0,
    stagger: 0.2,
    ease: 'power4.out'
  })

  // 副标题动画
  gsap.from('.subtitle', {
    duration: 1,
    y: 30,
    opacity: 0,
    delay: 0.5,
    ease: 'power4.out'
  })

  // 按钮动画
  gsap.from('.btn', {
    duration: 0.8,
    scale: 0,
    opacity: 0,
    stagger: 0.2,
    delay: 0.8,
    ease: 'back.out(1.7)'
  })

  // 浮动元素动画
  gsap.from('.float-element', {
    duration: 1,
    scale: 0,
    rotation: 180,
    opacity: 0,
    stagger: 0.2,
    delay: 1,
    ease: 'elastic.out(1, 0.5)'
  })
})
</script>

<style scoped>
.hero {
  min-height: calc(100vh - 60px - 60px); /* 减去导航栏高度和页脚高度 */
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 2rem 0;
}

@media (max-width: 768px) {
  .hero {
    min-height: calc(100vh - 50px - 60px); /* 移动端导航栏高度较小 */
  }
}

/* 其他样式保持不变 */
</style> 